<template>
	<view class="editor-header">
		<view class="header">
			<view class="top"
				:style="{
					height: statusBarHeight + 'px'
				}"
			></view>
			<view class="nav pb-1">
				<view class="icon flex justify-center align-center mt-1">
					<u-icon name="arrow-left"
							color="#8c8c8c" 
							size="40"
							@click="$emit('back')"
					></u-icon>
				</view>
				
				<view class="save pt-1 mr-2">
					<u-button :text="saveText"
						color="#64f3b3"
						shape="circle"
						:customStyle="{
							height: 50 + 'rpx',
							color: '#3f3f3f'
						}"
						@click="$emit('save')"
					></u-button>
				</view>
			</view>
		</view>
		<view class="blank shadow-plain"></view>
	</view>
</template>

<script>
export default {
	name: 'editor-header',
	props: {
		saveText: {
			type: String,
			default: '发布'
		}
	},
	data() {
		return {
			// 屏幕状态栏高度
			statusBarHeight: 0,
		}
	},
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				this.statusBarHeight = res.statusBarHeight;
			}
		})
	},
	methods: {
		
	}
}	
</script>

<style lang="scss" scoped>
.editor-header{
	.blank{
		/* #ifndef APP-PLUS */
		height: 73rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 145rpx;
		/* #endif */
		width: 100vw;
		background-color: white;
	}
	.header{
		position: fixed;
		z-index: 999;
		width: 100vw;
		background-color: white;
		box-shadow: 0 0 1rpx rgba(#434343, .12);
		.top{
			width: 100vw;
		}
		.nav{
			overflow: hidden;
			/* #ifndef APP-PLUS */
			$length: 50rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			$length: 60rpx;
			/* #endif */
			.icon{
				/* #ifndef APP-PLUS */
				width: $length;
				height: $length;
				margin-left: 15rpx;
				/* #endif */
				/* #ifdef APP-PLUS */
				width: $length;
				height: $length;
				margin-left: 30rpx;
				/* #endif */
				float: left;
				border-radius: 50%;
				background-color: rgba(#4f4f4f, .1);
			}
			.save{
				float: right;
				width: 100rpx;
			}
		}
	}
}	
</style>